<template>
	<view class="cancelList">
		<view class="cancel-cont marin25">
			<view class="cancel-money">
				<view class="money-cont ">
					退款金额
					<view class="money-num">
						¥60.00
					</view>
				</view>
				<view class="cancel-text font28">
					退回原支付方
				</view>
			</view>
			<view class="hotel-pay font28">
				<view class="hotel-cont ">
					订单支付金额
					<view class="hotel-num">
						¥60.00
					</view>
				</view>
				<view class="hotel-text">
					(房费¥69）
				</view>
			</view>
		</view>
		<view class="cancel-choose marin25">
			<view class="choose-money padding25">
				取消订单（单选）
			</view>
			<view class="tag-cont">
				<fui-data-tag :options="options" background="#F4F3F4" :padding="['14rpx','15rpx']" width="200" activeColor='#35743D'
				 activeBgColor='#F8FFF9' borderColor='#35743D' height='60' @change="chooseChange"></fui-data-tag>
			</view>
		</view>

		<!-- 取消订单btn -->
		<view class="cancelBtn">
			<fui-button background="#35743D"  radius='45rpx' height="72rpx" text="确认取消订单" @click='confirmCancel'></fui-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseOssUrl,
	} from '@/common/settings';
	export default {
		//登录状态
		// computed: mapState(['isLogin']),
		computed: mapState(['userId']),
		data() {
			return {
				baseOssUrl: baseOssUrl,
				options: [{
						//显示文本，必填
						text: '行程变更',
						//值，必填
						value: 1,
						//是否默认选中，默认值false
						selected: false,
					}, {
						//显示文本，必填
						text: '订错时间/地址',
						//值，必填
						value: 2,
						//是否默认选中，默认值false
						selected: false,
					}, {
						//显示文本，必填
						text: '前台价格更优惠',
						//值，必填
						value: 3,
						//是否默认选中，默认值false
						selected: false,
					}, {
						//显示文本，必填
						text: '前台提供早餐',
						//值，必填
						value: 4,
						//是否默认选中，默认值false
						selected: false,
					}, {
						//显示文本，必填
						text: '对酒店环境不满意',
						//值，必填
						value: 5,
						//是否默认选中，默认值false
						selected: false,
					},
					{
						//显示文本，必填
						text: '实际与页面不服',
						//值，必填
						value: 6,
						//是否默认选中，默认值false
						selected: false,
					},
					{
						//显示文本，必填
						text: '其他APP更便宜',
						//值，必填
						value: 7,
						//是否默认选中，默认值false
						selected: false,
					}, {
						//显示文本，必填
						text: '酒店满房/加价',
						//值，必填
						value: 8,
						//是否默认选中，默认值false
						selected: false,
					},
					{
						//显示文本，必填
						text: '其他',
						//值，必填
						value: 9,
						//是否默认选中，默认值false
						selected: false,
					},
				]
			}
		},
		methods: {
			chooseChange() {
			
			},
			confirmCancel(){
				console.log("111")
				uni.navigateTo({
					url:'/pages/cancelSuccess/index'
				})
				 
			}
			
		}
	}
</script>


<style lang="scss" scoped>
	.cancelList {
		height: 100%;

		.cancel-cont {
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 24rpx;
			padding: 24rpx;

			.cancel-money {
				border-bottom: 1px solid #D0D0D0;
				padding-bottom: 20rpx;

				.money-cont {
					display: flex;
					justify-content: space-between;
					color: #1D1D1D;
					font-weight: bold;

					.money-num {
						color: #D93C3C;
					}
				}

				.cancel-text {
					margin-top: 16rpx;
					color: #707070;
				}
			}

			.hotel-pay {
				margin-top: 20rpx;

				color: #707070;

				.hotel-cont {
					display: flex;
					justify-content: space-between;

					.hotel-num {
						color: #1D1D1D;
						font-weight: bold;
						font-size: 30rpx;
					}
				}

				.hotel-text {
					margin-top: 16rpx;
				}
			}
		}

		.cancel-choose {
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 24rpx;
			padding: 24rpx 0;

			.choose-money {
				color: #1D1D1D;
				font-weight: bold;

			}

			.tag-cont {
				margin-top: 30rpx;
				padding: 0 20rpx;
			}
		}

		.cancelBtn {
			margin: 0 auto;
			padding: 0 24rpx;
			margin-top: 80%;
		}
	}
</style>
